Dockerを使ってSwaggerの環境を整えてAPI Gatewayにインポートする

横田あかり

2016.05.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

API Gatewayを使いこなしたい

そろそろAPI Gateway使いこなしたい今日このごろですが、API Gatewayには、Swaggerの定義ファイルをインポートというボタンがあって、こっちを先にやってみようと思いました。環境周りの整備には以前学んだDockerを使えそうですので、試してみたいと思います。

Swagger Editorで編集する

エディタの環境を整えます。

docker pull swaggerapi/swagger-editor
docker run -d -p 8001:8080 swaggerapi/swagger-editor

screenshot 2016-05-06 15.38.00

ここで作成したJSONとかYAML形式のファイルをエクスポートして保存しておきます。

Swagger UIのインストール

Swagger UIは、Swaggerの定義ファイルからキレイな公開用のAPI確認サイトを作ってくれます。

$ git clone https://github.com/swagger-api/swagger-ui.git
$ cd swagger-ui/
$ docker build -t swagger-ui-builder .
$ docker run -d -p 8000:8080 swagger-ui-builder

$ docker-machine ip default
192.168.99.100

ブラウザで確認してみましょう。

screenshot 2016-05-06 15.36.58

デフォルトでPetstoreのサイトが表示されていますね。これはサンプルなので、先ほど作成した定義ファイルを指定したいと思います。

S3にファイルをアップしても良いのですが、今回はローカルにWebサーバを立てて動作確認したいと思います。ポイントはローカルファイル・システムとDockerボリュームをマッピングしていることです。マッピングしたディレクトリにswagger.jsonを配置しておいてください。また、Swagger UIは、クロスドメインで定義ファイルを読みに行きますので、CORS設定をする必要があります。

$ cp swagger.json ~/Desktop/www/
$ docker run -d -p 8080:80 -it -v ~/Desktop/www:/usr/share/nginx/html:rw nginx

$ docker ps -a
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                           NAMES
7b33318af58a        nginx               "nginx -g 'daemon off"   22 seconds ago      Up 22 seconds       443/tcp, 0.0.0.0:8080->80/tcp   compassionate_visvesvaraya

$ docker exec -it 7b33318af58a bash
root@7b33318af58a:/# apt-get update
root@7b33318af58a:/# apt-get install vim
root@7b33318af58a:/# vim /etc/nginx/conf.d/default.conf
        proxy_no_cache 1;
        proxy_cache_bypass 1;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, api_key, Authorization';
	add_header 'Content-Type' 'application/json';

実際にCORSヘッダが付与されているか確認します。

$ curl -I http://192.168.99.100:8080/swagger.json
HTTP/1.1 200 OK
Server: nginx/1.9.15
Date: Thu, 12 May 2016 16:49:52 GMT
Content-Type: application/json
Content-Length: 7133
Last-Modified: Wed, 11 May 2016 01:16:18 GMT
Connection: keep-alive
ETag: "573287e2-1bdd"
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, DELETE, PUT
Access-Control-Allow-Headers: Content-Type, api_key, Authorization
Accept-Ranges: bytes

$ curl -I http://petstore.swagger.io/v2/swagger.json
HTTP/1.1 200 OK
Date: Thu, 12 May 2016 17:06:07 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, DELETE, PUT
Access-Control-Allow-Headers: Content-Type, api_key, Authorization
Content-Type: application/json
Content-Length: 0
Connection: close
Server: Jetty(9.2.9.v20150224)

PetStoreのサイトと同じようなヘッダになりましたね！これで、Swagger UIでSwagger定義ファイルをホストしているURLを指定すればAPI一覧が表示されます。

API Gatewayにインポートする

最後にAPI Gatewayにインポートしてみたいと思います。

screenshot_2016-05-13_2_11_08

無事にインポートでき、、、、、そうでしたが、API Gatewayの仕様に沿ってない部分があるようですので、そこは微調整してください。

screenshot 2016-05-13 2.13.53

後日談（2018年5月追記）

Swagger定義ファイルからAPI Gatewayにいい感じにインポートできないのツライなーと思っていのたですが、後日機能追加されていたようで、「警告を無視する」ってオプションが増えていました。そして、インポート成功しました！よかったよかった

まとめ

今回は、タイトルの通り、Dockerを使ってSwaggerの環境を整えてAPI Gatewayにインポートするところまで確認しました。Swagger Editorでは、雛形となるクライアント側のコードを自動生成して吐き出してくれますので、デプロイしたサーバー側にアクセスすることが用意です。また、API Gatewayは、モックの設定もできますので、サーバーサイドの開発を待たずに、クライアント側のみの開発を進めることも容易ですね。